<template>
  <view class="m-bbb">
    <view
      class="item dev-box label1"
      v-for="(item, index) in positions"
      :key="index"
     @click="onClick(item)"
	  >
     <view class="mark" >
	 
	   <text v-if=" item.state==1" class="title-name">进行中</text>
	      <text v-else-if=" item.state==0" class="title-name">未开始</text>
	     <text v-else-if=" item.state==2" class="title-name">已完成</text>
	     <text v-else-if=" item.state==3" class="title-name">已取消</text>
	 	<text v-else=" item.state==3" class="title-name">进行中</text>
	 </view>
	
	 <!-- <image v-if="item.listing=='1'" @click.stop="edit(item.id)" class="editBtn" src="../../static/icon/edit.png"> -->
  <!--   <view class="mark" >{{ item.bangbType }}</view> -->

      <view class="title space-between">
		  
        <view class="left">
         订单名称 ： 
		  <text class="title-name">{{item.title}}</text>
	
        </view>
		
        <text class="right">{{ item.money + '星币' }}</text>
      </view>
	 <view>
	     订单编号：
	    <text> {{ item.id }}   </text> 
		
		<button @click.stop="copyText(item.id)"  type="default"  style="font-size: 8px;"  size="mini">复制</button>
		
	  </view>
      <view>
        帮帮类型：
        <text
          :class="{
            'text-error': item.urgent == '1',
          }"
          >{{ item.urgent == '0' ? '正常' : '加急' }}</text
        >
      </view>
	 
<!-- 	  <view class="labelBb1">
	  	  服务状态：
	  	    <text :class="item.state==0 ? 'touserstate': 'touserstate1'"> </text>
		    <text :class="item.state==0 ? 'touserstate': 'touserstate1'"> </text>
			<text :class="item.state==0 ? 'touserstate': 'touserstate1'"> </text>
			<text :class="item.state==0 ? 'touserstate': 'touserstate1'"> </text>
			 <text :class="item.state==0 ? 'touserstate': 'touserstate1'"> </text>
	   </view>
	   -->
	   <view class="labelBb1">
	   	  订单状态：
	   	      <text v-if=" item.state==0" :class="item.formuserstate==0 ? 'touserstate': 'touserstate1'"> 未开始
			  <!-- <text>注：买家未确认完成，请联系买家进行核实，如有问题可联系在线客服处理。</text>-->
			  </text> 
			  <text v-else-if=" item.state==1" :class="item.formuserstate==0 ? 'touserstate': 'touserstate1'"> 进行中</text>
		      <text v-else-if=" item.state==2" :class="item.formuserstate==0 ? 'touserstate': 'touserstate1'"> 待确认完成</text>
		      <text v-else-if=" item.state==3" :class="item.formuserstate==0 ? 'touserstate': 'touserstate1'"> 已取消 </text>
			  <text v-else-if=" item.state==4" :class="item.formuserstate==0 ? 'touserstate': 'touserstate1'"> 确认未完成</text>
			   <text v-else-if=" item.state==4" :class="item.formuserstate==0 ? 'touserstate': 'touserstate1'"> 已完成</text>
			
		</view>
	    
	
	   
      <view class="dateTime">
        <uni-icons type="calendar" style="margin-right: 15upx"></uni-icons>
        接单时间：{{ item.createTime }}
      </view>
      <view class="dateTime">
        <uni-icons type="calendar" style="margin-right: 15upx"></uni-icons>
        截止时间： {{ item.createTime }}
      </view>
  <!--    <view class="label">
        <text class="title-parttime">{{ item.mode }}</text>
      </view> -->
	
	  <view class="labelBb1">
	<!-- 	  <view v-if="item.listing=='0'  && item.payState==1">   <button @click.stop="bbCick(item.id,0)"  type="default" size="mini" class="title-parttime1">下架</button></view>
			<!-- <button  class="title-parttime2">上架</button></view> -->
		<!-- 	  <view v-else-if="item.listing=='1'  && item.payState==1"> <button  class="title-parttime2" type="default"  @click.stop="bbCick(item.id,1)"  size="mini">上架</button>
	           </view> -->
			   
			<!--   <view v-else-if="item.payState==0"> <button class="title-parttime2"   @click.stop="bbOPay(item.id)"  size="mini">点击支付佣金可上架</button>
			    </view> --> 
				 <button class="title-parttime2" v-if="item.orderState==0"   @click.stop="bbOPay(item.id)" style="font-size: 9px;" >点击支付保证金开始服务</button>
				 
				<button class="order-state" v-if="item.orderState==1 && item.state==0"  
				 @click.stop="startService(item.id,0)" style="font-size: 9px;" >开始服务</button>
				 
				 <button class="order-state" v-else-if="item.orderState==1 && item.state==1"
				  @click.stop="startService(item.id,1)" style="font-size: 9px;" >确认完成</button>
				  
				 
	  </view>
	  
    </view>
  </view>
</template>

<script>
import mEmptyData from '@/components/m-empty-data/m-empty-data.vue';
import { formatDate } from '@/common/date';
export default {
  name: 'yzb-position',
  props: {
    positions: Array,
    listType: Number,
    isAuth: Boolean,
  },
  components: {
    mEmptyData,
  },
  data() {
    moneyShow: false;
    return {
      no_order_1: this.$mAssetsPath.no_order_1,
    };
  },

  methods: {
	  
	  copyText(e) {
		  console.log("复制的内容"+e);
	        const textToCopy = e;
	        uni.setClipboardData({
	          data: textToCopy,
	          success() {
	            uni.showToast({
	              title: '已复制',
	              icon: 'success'
	            });
	          }
	        });
			},
    onClick(item) {
      this.$emit('click', item);
    },
	startService(id,type) {
			//0 开始服务 1服务完成
			const reqBb =  {id:id,type:type}
			const prote=this;
			if(type==0){
				uni.showModal({
					title: '提示',
					content: '是否确认开始服务，确认后订单将不能取消。',
					success: function (res) {
						if (res.confirm) {
							 prote.$apis.bbOrderConfirm(reqBb).then((req)=>{
								 if(req){
									 
								  const index = this.positions.findIndex(item => item.id === reqBb);
								    if (index !== -1) {
								    		  this.positions[index].touserstate = 1; // 或者删除该项：this.positions.splice(index, 1);
								    }
								   }
							  });
							  
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
			}else if(type==1){
				uni.showModal({
					title: '提示',
					content: '是否确认完成订单，确认后需等待发单者确认，未确认订单平台将在24小时后自动完成。',
					success: function (res) {
						if (res.confirm) {
							 prote.$apis.bbOrderConfirm(reqBb).then((req)=>{
								 if(req){
									 
								  const index = this.positions.findIndex(item => item.id === reqBb);
								    if (index !== -1) {
								    		  this.positions[index].touserstate = 2; // 或者删除该项：this.positions.splice(index, 1);
								    }
								   }
							  });
							  
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
	
		
		
	},
	bbOPay(id) {
		// 用户点击了确认按钮，执行下一个功能的逻辑
		const prent = this;
		const reqBb =  {id:id,type:4,payType:1,password:'123456'}
	prent.$apis.payWxCreateBb(reqBb).then((params) => {
	    // 异步操作成功的处理逻辑
	    console.log('支付成功：', params);
						
					   const res =	  uni.requestPayment({
							  provider: params.package,
							  timeStamp: params.timestamp,
							  nonceStr: params.noncestr,
							  package: params.partnerid,
							  signType: "RSA",
							  paySign: params.sign,
							  success: (res) => {
							uni.showToast({
							  title: '恭喜您支付成功！',
							})
	
							 // 在第3级页面内 navigateBack，将返回第一层页面
							 uni.navigateBack({
							 	delta: 1
							 });
						setTimeout(() => {
						    this.$mRouter.push({
						      route: this.$mRoutesConfig.index
						    });
						  }, 1000);
						  
							  },
							  		
							  fail: (err) => {
								  uni.showToast({
								    title: '支付失败',err
								  })
								  	console.log("支付err返回",err)
								//this.getSubscribe('0')
							  }
		      });
	}),error((error) => {
	    // 异步操作失败的处理逻辑
	    console.error('支付失败122：', error);
	});
	  
	  
	  
	  
	  
	},
	
	 bbCick(id,type) {
		  // uni.showToast({
		  //   title: "热死",
		  //   icon: 'success',
		  //   position: 'bottom',
		  // });
		  	const prent = this;
			const reqBb = id;
			const type1 = type;
			let msg = "";
			if(type==0){
				msg="是否进行下架?"
			}else {
				msg="是否进行上架?"
			}
			uni.showModal({
			  title: '提示',
			  content: msg,
			  success:  (res) =>{
			    if (res.confirm) { 
			      // 在这里你可以处理用户点击确定后的逻辑，并传递需要的值
			      // 例如，你可以将某个变量的值作为参数传递给下一个函数或方法
			  prent.$apis.bangbRe( {id:reqBb,type:type1}).then(response => {
					   console.log("接口返回2" ,response);
							// 处理接口响应
								if(response){
									uni.showToast({
									  title: type===0?"下架成功":"上架成功",
									  icon: 'success',
									  position: 'bottom',
									});
								}
			
							// 更新 positions 数组中相应项的状态为已下架
							    const index = this.positions.findIndex(item => item.id === reqBb);
							    if (index !== -1) {
									if(type==0){
										  this.positions[index].listing = '1'; // 或者删除该项：this.positions.splice(index, 1);
									}else{
										  this.positions[index].listing = '0'; // 或者删除该项：this.positions.splice(index, 1);
									}
							    
							    }
				          }).catch(error => {
				            // 处理错误
							    console.log("接口返回错误的" + response);
				          });
			    } else if (res.cancel) {
			      console.log('用户点击取消');
			      // 在这里你可以处理用户点击取消后的逻辑
			    }
			  }
			});

		  //   wx.showModal({
				// title: '提示',
				// content: '是否进行下架？',reqBb,
				// 	success(res) {
				// 	    if (res.confirm) {
				// 			  let res =  prent.$apis.bangbRe(reqBb);
							  
				// 			}else if (res.cancel) {
		  //               // 用户点击了取消按钮，可以不做任何操作，或者给出提示
				// 		setTimeout(() => {
				// 		  //uni.navigateBack();
				// 		}, 3000);
		  //           }
							
				// 	}
				//  });
		
	    },
		edit(id){
			uni.navigateTo({
					url:  `/pages/bbb/bbbEdit?id=${id}`
			      });
			
		},
    formatCreateTime(time) {
      if (time == null || time === '') {
        return '未知';
      }
      let str = time.replace(/-/g, '/');
      let date = new Date(str);
      return formatDate(date, 'yyyy.MM.dd');
    },
  },
};
</script>

<style lang="scss">
.m-bbb {
  .mark {
    color: white;
    font-size: 35upx;
    line-height: 80upx;
    width: 180upx;
    text-align: center;
	 transform: translateX(-10px);
  }
  .label1 {
    background-image: url(https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/img/label1.png);
  }
  .label2 {
    background-image: url(https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/img/label2.png);
  }
  .label3 {
    background-image: url(https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/img/label3.png);
  }
  .item {
	  position: relative;
    background-size: 200upx 90upx;
    background-repeat: no-repeat;
    background-color: $bgcolor_white;
    padding: 0upx 30upx;
  }
}

.labelBb1 {
  height: 40upx;
  width: 100%;
  margin-top: 8upx;
.title-parttime1 {
	margin-top: -40upx;
    float: right;
	 background-color: #f0f4dc;//设置按钮的背景颜色为浅黄色。
  }
  .touserstate{
	  font-weight: bold;
	  color: #000000;
  }
  .touserstate1{
  	  font-weight: bold;
  	  color: #ffcc8c;
	  
  }
  
  .title-parttime2 {
  	//height: 40upx;
  	//width: 20%;
    //color: #663399;//设置按钮的文字颜色为紫色。
     // border: 2upx solid #36b957;//设置按钮的边框为 2upx 的实线边框，颜色为绿色。
    //  background-color: #bfbfbf;//设置按钮的背景颜色为浅黄色。
      //font-size:  1.0rem;;
  //	font-size: 35upx; //字体大小
    //  margin-left: 15upx;//设置按钮与其左侧元素之间的左侧间距为 15upx。
    //  padding: 4upx 15upx; //设置按钮的内边距为上下各 4upx，左右各 15upx。
  	margin-top: -20upx; //设置按钮与其上方元素之间的顶部间距为 -40upx，即按钮向上偏移 40upx。
  	//border-radius: 10upx;// 设置按钮的边框圆角半径为 10upx，使按钮呈现圆角效果。
    //  line-height: 30upx;//设置按钮的行高为 30upx，使按钮内文字垂直居中。
      float: right;//设置按钮浮动在右侧。
	  
    }
	.order-state{
			margin-top: -20upx; 
			float: right;
			background-color: #85E281;
	}
	.order-state1{
			margin-top: -20upx; 
			float: right;
			background-color: #e2bcd7;
	}
	.touserstate-state{
			margin-top: -20upx; 
			font-weight: bold;
			background-color: #a0e2a2;
	}
	
}
// .label {
//   height: 40upx;
//   width: 100%;
//   margin-top: 8upx;
//   .title-parttime {
//     color: #66666e;
//     border: 1upx solid #36b957;
//     background-color: #f5ffe6;
//     font-size: $uni-font-size-sm;
//     margin-right: 15upx;
//     padding: 4upx 15upx;
//     border-radius: 6upx;
//     line-height: 40upx;
//     float: left;
//   }
// }
.label {
  height: 40upx;
  width: 100%;
  margin-top: 8upx;
  // border-radius: 6upx; /* 添加圆角 */
  .title-parttime {
	font-size: 35upx; //字体大小
    color: #66666e;
    border: 1upx solid #36b957;
    background-color: #f5ffe6;
   // font-size: $uni-font-size-sm;
    margin-right: 15upx;
    padding: 4upx 15upx;
    border-radius: 6upx;
    line-height: 40upx;
    float: left;
	border-radius: 10upx; /* 添加圆角 */
  }
}
.text-error {
  color: #cb2e2e;
}
.space-between {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
.distance {
  float: right;
  color: #666;
}
// .label {
//   height: 40upx;
//   width: 100%;
//   margin-top: 8upx;
//   .title-parttime {
//     color: #66666e;
//     border: 1upx solid #36b957;
//     background-color: #f5ffe6;
//     font-size: $uni-font-size-sm;
//     margin-right: 15upx;
//     padding: 4upx 15upx;
//     border-radius: 6upx;
//     line-height: 40upx;
//     float: left;
//   }
// }
.labelBb {
  height: 40upx;
  width: 100%;
  margin-top: 8upx;
.title-parttime1 {
	color: #66666e;
	border: 1upx solid #36b957;
	background-color: #f5ffe6;
	font-size: $uni-font-size-sm;
	margin-right: 15upx;
	padding: 4upx 15upx;
	border-radius: 6upx;
	line-height: 40upx;
    float: right;
  }
}

.title {
  margin-top: 10upx;
  .title-name {
    font-weight: bold;
    font-size: $uni-font-size-lg;
  }
  .right {
    color: #cb2e2e;
    font-weight: bold;
    font-size: 32upx;
  }
}
.editBtn{
	width:45rpx;
	height:45rpx;
	position: absolute;
	right: 30rpx;
	top: 20rpx;
}
</style>
